import React, { useState, useEffect } from 'react'
import { Card, List, Button, Tag, Row, Col } from 'antd'
import { useNavigate } from 'react-router-dom'
import { PlayCircleOutlined, EyeOutlined, LikeOutlined, ShareAltOutlined, ArrowLeftOutlined } from '@ant-design/icons'

interface MediaContent {
  id: string
  title: string
  type: 'video' | 'article' | 'audio' | 'image'
  author: string
  publishDate: string
  views: number
  likes: number
  shares: number
  description: string
  category: string
  village: string
  status: 'published' | 'draft' | 'review'
}

const MediaIntegration: React.FC = () => {
  const navigate = useNavigate()
  const [contents, setContents] = useState<MediaContent[]>([])
  const [loading, setLoading] = useState(true)

  // mock数据 - 与后台管理模块关联
  useEffect(() => {
    const mockContents: MediaContent[] = [
      {
        id: '1',
        title: '幸福村丰收节精彩回顾',
        type: 'video',
        author: '幸福村村委会',
        publishDate: '2024-01-10',
        views: 1250,
        likes: 89,
        shares: 34,
        description: '记录幸福村丰收节的精彩瞬间和村民们的喜悦',
        category: '文化活动',
        village: '幸福村',
        status: 'published'
      },
      {
        id: '2',
        title: '现代农业技术推广手册',
        type: 'article',
        author: '农业技术员-张三',
        publishDate: '2024-01-08',
        views: 890,
        likes: 45,
        shares: 23,
        description: '详细介绍现代农业种植技术和病虫害防治方法',
        category: '技术指导',
        village: '和平村',
        status: 'published'
      },
      {
        id: '3',
        title: '乡村美景摄影集',
        type: 'image',
        author: '摄影爱好者-李四',
        publishDate: '2024-01-05',
        views: 1560,
        likes: 120,
        shares: 67,
        description: '展现乡村自然风光和人文景观的摄影作品',
        category: '乡村风光',
        village: '富裕村',
        status: 'published'
      },
      {
        id: '4',
        title: '智慧农业示范园建设进展',
        type: 'video',
        author: '农业技术员-王五',
        publishDate: '2024-01-12',
        views: 980,
        likes: 67,
        shares: 29,
        description: '展示智慧农业示范园的最新建设进展和技术应用',
        category: '技术指导',
        village: '和平村',
        status: 'published'
      },
      {
        id: '5',
        title: '乡村文化节活动预告',
        type: 'article',
        author: '文化站-赵六',
        publishDate: '2024-01-15',
        views: 1120,
        likes: 78,
        shares: 41,
        description: '即将举办的乡村文化节活动预告和参与方式介绍',
        category: '文化活动',
        village: '幸福村',
        status: 'published'
      },
      {
        id: '6',
        title: '农产品电商销售指南',
        type: 'article',
        author: '电商专家-钱七',
        publishDate: '2024-01-18',
        views: 1340,
        likes: 92,
        shares: 56,
        description: '帮助村民掌握农产品电商销售技巧和平台运营方法',
        category: '技术指导',
        village: '富裕村',
        status: 'published'
      },
      {
        id: '7',
        title: '乡村传统手工艺展示',
        type: 'image',
        author: '手工艺人-孙八',
        publishDate: '2024-01-20',
        views: 1670,
        likes: 145,
        shares: 78,
        description: '展示乡村传统手工艺的精湛技艺和文化价值',
        category: '文化活动',
        village: '和平村',
        status: 'published'
      },
      {
        id: '8',
        title: '乡村健康生活讲座',
        type: 'audio',
        author: '健康专家-周九',
        publishDate: '2024-01-22',
        views: 890,
        likes: 54,
        shares: 32,
        description: '关于乡村健康生活方式和疾病预防的专题讲座',
        category: '健康生活',
        village: '幸福村',
        status: 'published'
      },
      {
        id: '9',
        title: '数字乡村建设成果展示',
        type: 'video',
        author: '数字乡村建设组',
        publishDate: '2024-01-25',
        views: 1560,
        likes: 112,
        shares: 63,
        description: '展示数字乡村建设的最新成果和未来规划',
        category: '技术指导',
        village: '富裕村',
        status: 'published'
      },
      {
        id: '10',
        title: '乡村旅游资源介绍',
        type: 'image',
        author: '旅游发展办-吴十',
        publishDate: '2024-01-28',
        views: 1780,
        likes: 156,
        shares: 89,
        description: '介绍乡村特色旅游资源和发展潜力',
        category: '乡村风光',
        village: '和平村',
        status: 'published'
      }
    ]

    setTimeout(() => {
      setContents(mockContents)
      setLoading(false)
    }, 1000)
  }, [])

  const getTypeIcon = (type: string) => {
    switch (type) {
      case 'video': return <PlayCircleOutlined style={{ color: '#ff4d4f' }} />
      case 'article': return <EyeOutlined style={{ color: '#1890ff' }} />
      case 'audio': return <LikeOutlined style={{ color: '#52c41a' }} />
      case 'image': return <ShareAltOutlined style={{ color: '#faad14' }} />
      default: return <EyeOutlined />
    }
  }

  const getTypeText = (type: string) => {
    switch (type) {
      case 'video': return '视频'
      case 'article': return '文章'
      case 'audio': return '音频'
      case 'image': return '图片'
      default: return type
    }
  }

  return (
    <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
      <Card 
        title={
          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
            <Button 
              type="text" 
              icon={<ArrowLeftOutlined />} 
              onClick={() => navigate('/user-dashboard')}
              style={{ padding: '4px 8px' }}
            >
              返回
            </Button>
            <span>乡村媒体融合发布</span>
          </div>
        }
        style={{ marginBottom: '24px' }}
        extra={
          <Button type="primary">
            内容投稿
          </Button>
        }
      >
        <List
          loading={loading}
          dataSource={contents}
          renderItem={content => (
            <List.Item
              actions={[
                <Button type="link" icon={<EyeOutlined />}>查看</Button>,
                <Button type="link" icon={<LikeOutlined />}>点赞</Button>,
                <Button type="link" icon={<ShareAltOutlined />}>分享</Button>
              ]}
            >
              <List.Item.Meta
                avatar={getTypeIcon(content.type)}
                title={
                  <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                    <span>{content.title}</span>
                    <Tag color="blue">{getTypeText(content.type)}</Tag>
                    <Tag color="green">{content.village}</Tag>
                  </div>
                }
                description={
                  <div>
                    <p>{content.description}</p>
                    <Row gutter={16} style={{ marginTop: '8px' }}>
                      <Col span={6}>作者：{content.author}</Col>
                      <Col span={6}>发布时间：{content.publishDate}</Col>
                      <Col span={6}>浏览：{content.views}</Col>
                      <Col span={6}>点赞：{content.likes} | 分享：{content.shares}</Col>
                    </Row>
                  </div>
                }
              />
            </List.Item>
          )}
        />
      </Card>
    </div>
  )
}

export default MediaIntegration